<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/reset.css"/>
  <link rel="stylesheet" href="./css/index.css"/>
  <link rel="stylesheet" href="./css/fonts/iconfont.css"/>
  <title>网关</title>
</head>
<body>
  <div class="device-wrapper">
    <div class="door-control-box">
      <section class="door-control-body">
      </section>
    </div>
    <!-- 网关模板 -->
    <script id="wagnguanTpl" type="text/html">
      <p class="battery-status-icon">
        <span class="iconfont icon-battery battery f-green"></span>
        <span class="battery-text">{{$data.connected ? '正常':'— —'}}</span>
      </p>
      {{if $data.connected}}
        <div class="door-status-img">
          <div class="circle-green">
            <div class="circle-inner-green">
              <span class="iconfont icon-online green-icon"></span>
            </div>
          </div>
        </div>
        <p class="current-status">在线状态</p>
      {{else}}
        <a class="tips" onclick="Tips.showTips()">如何使设备上线?</a>
        <div class="door-status-img">
          <div class="circle-gray">
            <div class="circle-inner-gray">
              <span class="iconfont icon-offline gray-icon"></span>
            </div>
          </div>
        </div>
        <p class="current-status">离线状态</p>
      {{/if}}
    </script>
    <!-- tips弹窗 -->
    <div class="tips-content">
      <p class="title">如何使用设备上线</p>
      <div class="text">
          <h3>1.保持设备上线</h3>
          设备通电后，开机使设备启动。
          如未通电，请通电后等待设备上线。
          <br>
          <h3>2.保持设备网络正常</h3>
          按住中继器的功能键5S以上。
      </div>
      <a class="btn-next" onclick="Tips.hiddenTips()">我知道了</a>
    </div>
    <div class="mask"></div>
  </div>
  <script src="https://open.home.komect.com/jssdk/hejia-1.1.0.min.js"></script>
  <script src="./javascript/template.js"></script>
  <script>
    // 展示tips框
      const Tips = {
        tipsCon : document.querySelector('.tips-content'),
        mask : document.querySelector('.mask'),
        showTips: function () {
          this.tipsCon.style.display = 'block'
          this.mask.style.display = 'block'
        },
        hiddenTips: function () {
          this.tipsCon.style.display = 'none'
          this.mask.style.display = 'none'
        }
      }
    // 异步获取数据
    let networkDataHejia = {}
    /*
    *获取设备详细信息接口，可确定设备最准确的连接状态
    */
    function getDeviceInfoFun (){
      Hejia.getDeviceInfo(function (data){
        let connected
        // alert(`状态 ${JSON.stringify(data)}`)
        if (data){
          connected = data.device.connected
          networkDataHejia['connected'] = connected
          let networkHtml = template('wagnguanTpl', networkDataHejia)
          document.querySelector('.door-control-body').innerHTML = networkHtml
        } 
      },function (msg, obj){
        console.log(msg);
      })
    }
    Hejia.ready(function(){
      // 页面加载完成后要立即调用Hejia全局对象执行的代码逻辑写这里
      getDeviceInfoFun()
    });

    // var  data ={'connected': false}
    // let networkHtml = template('wagnguanTpl', data)
    //     document.querySelector('.door-control-body').innerHTML = networkHtml
  </script>
</body>
</html>